<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理平台</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f4f8;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .container {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h2 {
            margin-top: 0;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group input, .form-group textarea, .form-group select {
            padding: 10px;
            width: calc(100% - 22px);
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 5px;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        button.add {
            background-color: #28a745;
        }
        button.remove {
            background-color: #dc3545;
        }
        footer {
            text-align: center;
            margin-top: 20px;
            border-top: 1px solid #ccc;
            padding-top: 10px;
        }
    </style>
</head>
<body>
<header>
    <h1>商品管理平台</h1>
</header>

<div class="container">
    <h2>添加商品</h2>
    <div class="form-group">
        <label for="productName">商品名称</label>
        <input type="text" id="productName" placeholder="请输入商品名称">
    </div>
    <div class="form-group">
        <label for="productDescription">商品简介</label>
        <textarea id="productDescription" placeholder="请输入商品简介"></textarea>
    </div>
    <div class="form-group">
        <label for="productPrice">商品价格</label>
        <input type="number" id="productPrice" placeholder="请输入商品价格">
    </div>
    <div class="form-group">
        <label>标签 (选择多个)</label><br>
        <input type="checkbox" class="tag" value="标签1"> 标签1<br>
        <input type="checkbox" class="tag" value="标签2"> 标签2<br>
        <input type="checkbox" class="tag" value="标签3"> 标签3<br>
        <input type="checkbox" class="tag" value="标签4"> 标签4<br>
    </div>
    <button class="add" onclick="addProduct()">添加商品</button>

    <h2>商品列表</h2>
    <ul id="productList"></ul>
</div>

<footer>
    <button class="add" onclick="saveAndExit()">保存并退出</button>
</footer>

<script>
    // 用来存储商品的数组
    let products = [];

    // 添加商品
    function addProduct() {
        const name = document.getElementById('productName').value.trim();
        const description = document.getElementById('productDescription').value.trim();
        const price = parseFloat(document.getElementById('productPrice').value);

        // 获取所有被选中的标签
        const selectedTags = Array.from(document.querySelectorAll('.tag:checked')).map((checkbox) => checkbox.value);

        if (!name || !description || isNaN(price)) {
            alert("请填写完整的商品信息");
            return;
        }

        const product = {
            id: products.length + 1,
            name: name,
            description: description,
            price: price,
            tags: selectedTags
        };

        products.push(product);
        displayProducts();
        clearInputFields();
    }

    // 显示商品
    function displayProducts() {
        const productList = document.getElementById('productList');
        productList.innerHTML = '';
        products.forEach(product => {
            const li = document.createElement('li');
            li.innerHTML = `${product.name} - ${product.description} - ￥${product.price} <strong>标签:</strong> ${product.tags.join(', ')}
                <button onclick="editProduct(${product.id})">编辑</button>
                <button class="remove" onclick="removeProduct(${product.id})">删除</button>`;
            productList.appendChild(li);
        });
    }

    // 清空输入框
    function clearInputFields() {
        document.getElementById('productName').value = '';
        document.getElementById('productDescription').value = '';
        document.getElementById('productPrice').value = '';
        const checkboxes = document.querySelectorAll('.tag');
        checkboxes.forEach(checkbox => checkbox.checked = false); // 取消选中所有复选框
    }

    // 删除商品
    function removeProduct(id) {
        products = products.filter(product => product.id !== id);
        displayProducts();
    }

    // 编辑商品
    function editProduct(id) {
        const product = products.find(p => p.id === id);
        if (product) {
            document.getElementById('productName').value = product.name;
            document.getElementById('productDescription').value = product.description;
            document.getElementById('productPrice').value = product.price;

            // 更新复选框状态
            const checkboxes = document.querySelectorAll('.tag');
            checkboxes.forEach(checkbox => {
                checkbox.checked = product.tags.includes(checkbox.value);
            });
            removeProduct(id); // 先删除再添加修改后的商品
        }
    }

    function saveAndExit(){
        // TODO 保存并退出功能未实现，等待后端接口
        console.log("保存并退出功能未实现，等待后端接口");
    }

    // 页面加载完成后输出初始化测试
    window.onload = function() {
        // TODO 初始化测试
        console.log("初始化测试");
    };
</script>
</body>
</html>
